/**
 * Body
 */
body {
  background-color: $color-grey;
}

/**
 * Sections
 */
section {
  position: relative;
}

.section-padding {
  padding: 4em 0;

  &--lg {
    padding: 6em 0;
  }

  &--sm {
    padding: 2em 0;
  }
}

/**
 * Class Container (BEM)
 */
[class*='__container'] {
  position: relative;
  z-index: 1;
}

/**
 * Blog page
 */
.previews {

  @media (max-width: $mq-md) {
    display: flex;
    flex-direction: column;
  }

  & > * {

    &:first-child {
      position: relative;

      height: 30em;

      background-color: $color-black;

      @media (min-width: $mq-md) {
        position: fixed;
        top: 0;
        left: 0;

        height: 100%;
        width: 45%;
      }

      &:after {
        @extend %overlay;
      }
    }

    &:last-child {
      min-height: 100vh;

      @media (min-width: $mq-md) {
        margin-left: 45%;
      }
    }
  }
}
